<template>
    <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in 4" :key="item">
            <h3 text="2xl" justify="center">{{ item }}</h3>
        </el-carousel-item>
    </el-carousel>
    <el-row :gutter="16">
        <el-col :span="14">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>浏览人数</span>
                    </div>
                </template>
                <VueECharts style="height: 200px;" :xAxis="xAxis" type="bar" :data="viewsNums"></VueECharts>
            </el-card>

        </el-col>
        <el-col :span="10">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>待办事宜</span>
                    </div>
                </template>
                <TodoList :is-home="true" />
            </el-card>
        </el-col>
    </el-row>
</template>
<script lang="ts" setup>
import VueECharts from '@/components/VueECharts/index.vue'
import { ref } from 'vue';
import TodoList from '@/components/Bussiness/TodoList.vue';
const xAxis = ref(['90后', '80后', '70后'])
const viewsNums = ref([80, 50, 30])
</script>